<template>
	<view>
		<view class="top">
			<view class="title">
				<view class="left">
					<image src="../../static/image/a1.png" class="img"></image>
					<view class="site">
						<view class="name">
							沈阳 <image src="../../static/image/i4.png" mode=""></image>
						</view>
						<view class="text">
							晴 4℃
						</view>
					</view>
				</view>
				<image src="../../static/image/a2.png" @click="toPage('share')" class="icon"></image>
			</view>
		</view>
		<view class="dataX">
			<view class="user">
				<view class="experience">
					<view class="progress" @click="toPage('/pages/htmlD/experience/index')">
						<view class="left">
							{{title}}
						</view>
						<u-line-progress :showPercent="false" height="15" activeColor="#FFC31E" :percent="scale">
						</u-line-progress>
						<view class="right">
							{{nexttitle}}
						</view>
						<view class="number" v-if="false">
							<view class="view">
								<view class="left">
									<view class="p-icon"></view>
									<view class="u-text">
										0
									</view>
								</view>
							</view>
							<view class="view" style="margin-left: auto;">
								<view class="right">
									<view class="x">
										<view class="p-icon">
											<view class="p"></view>
										</view>
									</view>
									<view class="u-text">
										100%
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dex">
				<view class="left">
					<view class="con" @click="toPage('/pages/htmlB/my/index')">
						<view class="number">
							{{data.total_guomi}}
						</view>
						<view class="text">
							Fmb
						</view>
					</view>
					<view class="name">
						总产出
					</view>
				</view>
				<view class="right">
					<view class="up" style="background:#FDF4ED ;">
						<view class="name">
							今日产出
						</view>
						<view class="number" style="color: #F66337;">
							{{data.guomi}} <text class="font">Fmb</text>
						</view>
					</view>
					<view class="up" @click="toPage('/pages/htmlB/gold/index')"
						style="margin-top: 20rpx;background:#FEF8E9 ;">
						<view class="name">
							金蜜/蜂钻
						</view>
						<view class="number" style="color: #F1B510;">
							{{data.jindou}}/ <text>{{data.jinzuan}}</text>
						</view>
					</view>
					<view class="up" @click="toPage('/pages/htmlB/gold/index')"
						style="margin-top: 20rpx;background:#F7F8FD;">
						<view class="name">
							本周累计产出
						</view>
						<view class="number" style="color: #004FFF;">
							{{data.week_guomi}}<text>Fmb</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="advertising">
			<image src="../../static/image/a5.png" mode=""></image>
			<view class="name">
				抢拍蜂巢
			</view>
			<view class="text">
				日增涨最大可达14%
			</view>
		</view>
		<view class="content">
			<view class="list" v-for="(item,index) in dataList" :key="index">
				<image :src="img_pre+item.manor_cover" class="img"></image>
				<view class="icon int" v-if="item.state==0">
					<view class="__bdi"></view> 开放中
				</view>
				<view class="icon" v-if="item.manor_appointment_status==1">
					<view class="__bdi"></view> 已预约
				</view>
				<image :src="img_pre+item.manor_logo" class="head"></image>
				<view class="title">
					{{item.title}}
				</view>
				<image v-if="item.state==1" src="../../static/image/a17.png" @click="showPopup(index,item.state)"
					class="button"></image>
				<image v-if="item.state==4" src="../../static/image/a16.png" class="button"></image>
				<image v-if="item.state==3" src="../../static/image/a15.png" class="button"></image>
				<image v-if="item.state==2" src="../../static/image/a12.png" class="button"></image>
				<image v-if="item.state==0" src="../../static/image/a6.png" class="button"
					@click="showPopup(index,item.state)">
				</image>
				<image v-if="item.state==5" src="../../static/image/a18.png" @click="toast('今日为休市日，不可进入蜂巢')"
					class="button"></image>
				<!-- <view class="button s0" v-if="item.state==0" @click="showPopup(index,item.state)">
					进场
					<image src="../../static/image/a6.png" class="go"></image>
				</view>
				<view class="button s1" v-else-if="item.state==1" @click="showPopup(index,item.state)">
					预约
					<image src="../../static/image/a6.png" class="go"></image>
				</view>
				<view class="button s4" v-else-if="item.state==4">
					等待进场
				</view>
				<view class="button s2" v-else-if="item.state==2">
					未开放
				</view>
				<view class="button s2" v-else-if="item.state==3">
					已预约
				</view> -->
				<view class="data">
					<view class="cont">
						<view class="number">
							{{parseInt(item.appoint_count)}} <text>人预约</text>
						</view>
						<view class="date">
							<view class="time">
								开放时间：{{item.date}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar height="100" v-model="current" :midButtonSize="midButtonSize" :show="true" :list="list"
			:mid-button="midButton" :inactive-color="inactiveColor" :activeColor="activeColor"></u-tabbar>
		<u-popup :closeable="true" close-icon-pos="top-left" borderRadius="30" mode="bottom" v-model="show">
			<view class="popup">
				<view class="_view">
					<view class="title">
						{{state==0?'进场':'预约'}}
					</view>
					<view class="cont" :style="state==1?'height: auto;':''">
						<view class="name" v-if="state==1">
							{{dataList[index].title}}预约价格为
						</view>
						<view class="name" v-if="state==0">
							{{dataList[index].title}}
						</view>
						<view class="text font" v-if="state==1">
							<text>{{dataList[index].need_kmb_order}}</text> 蜜贝
						</view>
					</view>
					<view class="cont2" v-if="state==1">
						<view class="t1">
							选择抢拍次数
						</view>
						<view class="select" @click="abc">
							<view class="da omit">
								{{label}}
							</view>
							<view class="xiao">></view>
						</view>
					</view>
				</view>
				<u-button type="success" v-if="state==0" :ripple="true" @click="jinchang" class="button">确认进场</u-button>
				<u-button type="success" v-if="state==1" :ripple="true" @click="MakeAnAppointment" class="button">确认预约
				</u-button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
		<u-popup :closeable="true" close-icon-pos="top-left" borderRadius="30" mode="bottom" v-model="show1">
			<view class="popup">
				<view class="_view">
					<view class="title">
						{{state==0?'进场':'预约'}}失败
					</view>
					<view class="cont" v-if="json.score>0">
						<view class="name">
							进入 {{dataList[index].title}}抢拍需要有{{json.scoreX}}经验值，您还差
						</view>
						<view class="text">
							<text>{{json.score}}</text> 经验值
						</view>
					</view>
					<view class="cont" v-else-if="json.invite_count>0">
						<view class="name">
							抢拍{{dataList[index].title}}需分享好友{{json.invite_countX}}人您还差
						</view>
						<view class="text">
							<text>{{json.invite_count}}</text> 人
						</view>
					</view>
				</view>
				<view class="popup_top"></view>
				<u-button v-if="json.scoreX>0" @click="toPage('/pages/htmlD/experience/index')" type="success"
					:ripple="true" class="button">查看经验</u-button>
				<u-button v-else-if="json.invite_countX>0" @click="toPage('/pages/htmlC/invitation/index')"
					type="success" :ripple="true" class="button">立即邀请</u-button>
				<u-button v-else-if="state==0" type="success" :ripple="true" class="button">立即抢拍</u-button>
				<!-- <u-button v-if="state==1" @click="show1=false,toPage('/pages/htmlC/invitation/index')" type="success" :ripple="true" class="button">前往邀请</u-button> -->
				<view class="popup_top"></view>
			</view>
		</u-popup>
		<u-popup :closeable="true" close-icon-pos="top-left" borderRadius="30" mode="bottom" v-model="show3">
			<view class="popup">
				<view class="_view">
					<view class="title">
						进场失败
					</view>
					<view class="cont" style="height: auto;">
						<view class="name2">
							进入该蜂巢需要成功抢拍之前的蜂巢，如未抢拍成功进场则需消耗
							<!-- <text class="t1"> {{dataList[index].need_gdb_number}} </text>
							<text class="t2">金蜜</text> -->
						</view>
						<view class="contentType">
							<u-row>
								<u-col :span="6" v-for="(item,index) in payType" :key="index">
									<view @click="getTabs(index)" :class="active==(index+1)?'active list':'list'">
										<image :src="'../htmlB/static/rx'+index+'.png'"></image>
										<view class="namex">
											{{item.name}}
										</view>
										<view class="number">
											{{item.number}}
											<text>{{item.type}}</text>
										</view>
										<view class="triangle" v-if="active==index+1"></view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>
				<u-button @click="useGdbIntoManor" type="success" :ripple="true" class="button">确认入场</u-button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
		<u-popup close-icon-pos="top-left" borderRadius="30" mode="bottom" :closeable="true" v-model="code">
			<view class="popup">
				<view class="_view">
					<view class="title">
						上传收款码
					</view>
					<view class="cont">
						<view class="name" style="height: auto;line-height: 1.5;margin: 20rpx 150rpx;">
							您还未上传收款码，不上传将 影响您的后续操作，请尽快上传
						</view>
					</view>
					<view class="code">
						<image src="../../static/image/code.png"></image>
					</view>
				</view>
				<u-button type="success" @click="code=false,toPage('/pages/htmlA/setting/collection?type=1')"
					:ripple="true" class="button">立即前往</u-button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
		<u-popup background="transparent" close-icon-pos="top-left" borderRadius="30" mode="bottom" v-model="show2">
			<view class="yuandan">
				<image src="../../static/image/lll.png" mode=""></image>
			</view>
		</u-popup>
		<u-popup background="transparent" close-icon-pos="top-left" borderRadius="30" mode="bottom" v-model="remind">
			<view class="fight">
				<view class="title_item">
					交易提醒
				</view>
				<view class="appeal">
					您还有未确认的蜂巢凭证请查看凭证并处理
				</view>
				<button type="default" class="button" @click="zhidao">查看确认</button>
			</view>
		</u-popup>
		<u-select v-model="site" :list="list1" @confirm="confirm"></u-select>
		<u-popup background="transparent" borderRadius="30" mode="center" v-model="notice">
			<view class="notice">
				<view class="notice-content">
					<view class="notice-title">
						{{openNewspaper.title}}
					</view>
					<view class="notice-lang"></view>
					<view class="notice-text">
						{{openNewspaper.content}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	var a = null;
	var Hours = null;
	var Minutes = null;
	var Seconds = null;
	export default {
		data() {
			return {
				notice: false,
				share: false,
				state: 0,
				index: 0,
				show: false,
				show2: false,
				code: false,
				show1: false,
				show3: false,
				remind: false,
				site: false,
				list1: [{
					value: 0
				}],
				label: "",
				value: "",
				dataList: [{
					image: 'i3',
					title: "葡萄蜂巢",
					state: 1,
					date: "9:00-11:00",
					number: "300"
				}],
				percent: 70,
				current: 0,
				midButtonSize: "122",
				list: [{
						"pagePath": "/pages/index/index",
						iconPath: "../../static/image/index2.png",
						selectedIconPath: "../../static/image/index1.png",
						text: '每日',
						isDot: true,
						customIcon: false,
					},
					{
						"pagePath": "/pages/home/index",
						iconPath: "../../static/image/home1.png",
						selectedIconPath: "../../static/image/home1.png",
						text: '蜂盈优品',
						midButton: true,
						customIcon: false,
					},
					{
						"pagePath": "/pages/user/index",
						iconPath: "../../static/image/user2.png",
						selectedIconPath: "../../static/image/user1.png",
						text: '我的',
						isDot: false,
						customIcon: false,
					},
				],
				midButton: true,
				inactiveColor: '#909399',
				activeColor: '#333333',
				json: {
					score: 0,
					invite_count: 0,
					scoreX: 0,
					invite_countX: 0
				},
				info: {},
				data: {},
				scale: 0,
				nexttitle: "",
				title: "",
				payType: [{
					name: '金蜜支付',
					type: 'Gdb',
					number: ''
				}, {
					name: '蜜贝支付',
					type: 'Fmb',
					number: ''
				}],
				active: 1,
				buy_number: 0,
				buy_number_list: [],
				openNewspaper:{}
			}
		},
		onLoad(option) {
			than = this;
			than.post('api/future/openNewspaper', null, function(data) {
				if (data) {
					than.notice = true;
					than.openNewspaper=data;
				}
			})
		},
		onShow() {
			uni.getStorage({
				key: 'getData',
				success: function(e) {
					than.data = e.data;
				},
				fail: function(e) {
					if (e.data == "") {
						than.headOfIndex();
					}
				}
			})
			a = new Date();
			Hours = a.getHours();
			Minutes = a.getMinutes();
			Seconds = a.getSeconds();
			let h1 = than.mul(than.mul(Hours, 60), 60)
			let m1 = than.mul(Minutes, 60)
			var date1 = than.add(than.add(h1, m1), Seconds);
			if (date1 < than.getTime(12, 30) || date1 > than.getTime(18, 10)) {
				than.headOfIndex();
			}
			than.listOfData();
		},
		methods: {
			headOfIndex() {
				than.post("api/index/headOfIndex", null, function(data) {
					than.data = data;
					uni.setStorage({
						key: 'getData',
						data: data
					})
				})
			},
			getTabs(index) {
				than.active = index + 1
			},
			abc() {
				than.site = true
			},
			confirm(e) {
				than.label = e[0].label
				than.value = e[0].value
			},
			zhidao() {
				than.toPage('/pages/htmlB/seed/list?current=1')
			},
			getTime(Hours, Minutes) {
				var time;
				let h1 = than.mul(than.mul(Hours, 60), 60)
				let m1 = than.mul(Minutes, 60)
				time = than.add(h1, m1);
				return time;
			},
			useGdbIntoManor() {
				var active = than.active == 1 ? 2 : 1;
				than.post("api/index/useGdbIntoManor", {
					maid: than.dataList[than.index].maid,
					use_type: active
				}, function(data) {
					than.show3 = false
					than.toPage('/pages/htmlB/farm/index?maid=' + than.dataList[than.index].maid + '&title=' + than
						.dataList[than.index]
						.title + '&logo=' + than.dataList[than.index].manor_logo)
				})
			},
			jinchang() {
				than.show = false
				than.post("api/index/needBuyGdbStatus", {
					maid: than.dataList[than.index].maid
				}, function(data) {
					let hours = new Date(data.time * 1000).getHours();
					let minutes = new Date(data.time * 1000).getMinutes();
					let seconds = new Date(data.time * 1000).getSeconds();
					let h = than.mul(than.mul(hours, 60), 60)
					let m = than.mul(minutes, 60)
					let date = than.add(than.add(h, m), seconds);
					if (than.sub(date, than.dataList[than.index].open_start) > 0 && than.sub(date, than.dataList[
							than.index].open_end) <
						0) {
						if (data.instatus) {
							than.toPage('/pages/htmlB/farm/index?maid=' + than.dataList[than.index].maid +
								'&title=' + than.dataList[than.index]
								.title + '&logo=' + than.dataList[than.index].manor_logo+'&open_start='+than.dataList[than.index].open_start+'&open_end='+than.dataList[than.index].open_end)
						} else {
							than.show3 = true
							than.payType[0].number = than.dataList[than.index].need_gdb_number
							than.payType[1].number = than.dataList[than.index].need_kmb_number
						}
					} else {
						than.toast("当前时间不是开放时间")
					}
				})
			},
			listOfData() {
				than.post("api/index/listOfData", null, function(data) {
					let hours = new Date().getHours();
					let minutes = new Date().getMinutes();
					let seconds = new Date().getSeconds();
					let h = than.mul(than.mul(hours, 60), 60)
					let m = than.mul(minutes, 60)
					var date = than.add(than.add(h, m), seconds);
					for (let i in data.list) {
						if (data.xiu_status == 0) {
							if (data.list[i].open_start < date && data.list[i].open_end > date) {
								data.list[i].state = 0
							} else if (data.list[i].open_end < date) {
								data.list[i].state = 2
							} else {
								if (data.list[i].manor_appointment_status == 1) {
									data.list[i].state = 3
								} else {
									data.list[i].state = 1
								}
							}
							var time = than.add(than.add(than.mul(than.mul(Hours, 60), 60), than.mul(Minutes, 60)),
								Seconds)
							if (time < data.list[i].open_start && time > than.sub(data.list[i].open_start, 300)) {
								data.list[i].state = 4
							}
							var start = than.formatSeconds(data.list[i].open_start)
							var end = than.formatSeconds(data.list[i].open_end)
							data.list[i].date = start + '-' + end
						} else {
							data.list[i].state = 5
						}
					}
					than.dataList = data.list;
					than.title = data.title;
					than.nexttitle = data.nexttitle;
					than.scale = data.scale;
				})
			},
			MakeAnAppointment() {
				than.post("api/manor/MakeAnAppointment", {
					maid: than.dataList[than.index].maid,
					buy_number: than.value
				}, function(data) {
					than.show = false;
					than.listOfData();
					than.toast("预约成功")
				})
			},
			giveKmbToUser() {
				than.post("api/center/giveKmbToUser", null, function(data) {
					if (data == 1) {
						than.show2 = true;
					}
				})
			},
			inviteAndBuy(maid) {
				than.post("api/manor/inviteAndBuy", {
					maid: maid
				}, function(data) {
					than.json = than.getGrade(data, than.dataList[than.index])
					if (than.state != 2) {
						than.post("api/manor/appointmentChooseList", {
							maid: maid
						}, function(data) {
							than.list1 = [];
							var arr = data.buy_number_list.split(',');
							than.label = arr[0] + "次"
							than.value = arr[0]
							for (let i in arr) {
								var other = arr[i]
								var json1 = {
									value: other,
									label: other + "次"
								}
								than.list1.push(json1)
							}
						})
						if (than.json.state) {
							than.show = true
						} else {
							if (than.json.privilege == 0) {
								than.show1 = true
							} else {
								than.show = true
							}
						}
					}
				})
			},
			showPopup(index, state) {
				//invite_count: 邀请
				//score: 积分
				//team_count: 团队
				this.$u.debounce(this.getResult(index, state));
			},
			getResult(index, state) {
				than.inviteAndBuy(than.dataList[index].maid)
				than.state = state;
				than.index = index;
			},
			formatSeconds(value) {
				var theTime = parseInt(value); // 秒
				var middle = 0; // 分
				var hour = 0; // 小时

				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
					if (middle > 60) {
						hour = parseInt(middle / 60);
						middle = parseInt(middle % 60);
					}
				}
				if (parseInt(middle) == 0) {
					middle = "00"
				} else if (parseInt(middle) < 10) {
					middle = "0" + middle
				}
				var result = hour + ':' + middle;
				return result;
			}
		}
	}
</script>

<style lang="less">
	.notice {
		background-image: url(../../static/image/pop3.png);
		background-size: 100% 100%;
		width: 575rpx;
		height: 781rpx;

		.notice-content {
			padding: 370rpx 90rpx 0 28rpx;

			.notice-title {
				font-size: 40rpx;
				font-family: FZDaHei-B02S;
				font-weight: 400;
				color: #323C63;
			}

			.notice-lang {
				margin-top: 36rpx;
				width: 100rpx;
				height: 7rpx;
				background: #3ADCAC;
			}

			.notice-text {
				margin-top: 30rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #272F59;
				line-height: 54rpx;
				overflow-y: auto;
				height: 230rpx;
			}
		}
	}

	.fight {
		width: 442rpx;
		height: 583rpx;
		text-align: center;
		background-image: url(../../static/image/pop2.png);
		background-size: 100% 100%;
		padding-bottom: 32rpx;

		.title_item {
			padding-top: 262rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #D72A19;
		}

		.appeal {
			margin-top: 43rpx;
			margin-bottom: 40rpx;
			padding: 0 100rpx;
			font-size: 24rpx;
			line-height: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #1E0406;
		}

		.icon {
			margin-top: 30rpx;
			text-align: center;

			image {
				width: 86rpx;
				height: 93rpx;
			}
		}

		.button {
			width: 314rpx;
			height: 80rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3D302A;
			line-height: 80rpx;
			background: #FCF5E2;
			border: 4rpx solid #FFB43D;
			box-shadow: 0px 6rpx 8rpx 0px rgba(170, 170, 170, 0.16);
			border-radius: 40rpx;
		}
	}

	.yuandan {
		image {
			width: 418rpx;
			height: 418rpx;
		}
	}

	.share {
		.up {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: -230rpx;

			.bag {
				width: 697rpx;
				height: 943rpx;
				background-image: url(../../static/image/s5.png);
				background-size: 100% 100%;

				.title {
					text-align: center;
					font-size: 72rpx;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					color: #272C34;
					background: linear-gradient(0deg, #C45B2A 0%, #DC8446 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.text {
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #C8632F;
				}

				.card {
					margin: auto;
					margin-top: 50rpx;
					width: 570rpx;
					height: 400rpx;

					.active {
						.c_name {
							color: #FF001F !important;
						}

						.c_number {
							color: #FF001F !important;
						}
					}

					.list {
						float: left;
						width: calc(50% - 40rpx);
						color: #1B1B1D;
						padding-left: 40rpx;

						.image {
							width: 227rpx;
							height: 53rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.c_name {
							padding-left: 20rpx;
							margin-top: 30rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #742F00;
						}

						.c_number {
							padding-left: 20rpx;
							font-size: 60rpx;
							font-family: DINCond-Black;
							font-weight: bold;
							font-style: italic;
							color: #1B1B1D;

							text {
								font-size: 32rpx;
							}
						}
					}
				}
			}
		}

		.down {
			height: 463rpx;
			background: #F8F6F4;
			border-radius: 70rpx 0px 0px 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 200rpx;

			.list {
				width: 190rpx;
				text-align: center;

				image {
					width: 106rpx;
					height: 106rpx;
				}

				.name {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}
	}

	.popup {
		width: 100%;

		.popup_top {
			height: 30rpx;
		}

		._view {
			background: #FFFFFF;

			.title {
				height: 108rpx;
				line-height: 108rpx;
				text-align: center;
				border-bottom: 2rpx solid #F6F6F6;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.code {
				text-align: center;
				padding-bottom: 40rpx;

				image {
					width: 81rpx;
					height: 81rpx;
				}
			}

			.cont2 {
				.select {
					width: 413rpx;
					height: 100rpx;
					line-height: 1;
					background: #FFFFFF;
					border: 1rpx solid #8E8E8E;
					border-radius: 20rpx;
					margin: 20rpx auto;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;

					.da {
						padding: 0 40rpx;
					}

					.xiao {
						margin-left: auto;
						margin-right: 41rpx;
					}
				}

				.t1 {
					text-align: center;
				}

				.t2 {
					overflow: hidden;
					padding: 20rpx;

					.active {
						border: 1px solid #e3ebfe !important;
					}

					.t {
						float: left;
						border: 1px solid #000000;
						min-width: 50rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 10rpx;
					}
				}
			}

			.cont {
				text-align: center;
				font-size: 28rpx;
				color: #333333;

				.name {
					margin: 40rpx 90rpx;
				}

				.name2 {
					margin: 40rpx 20rpx;

					.t1 {

						font-size: 48rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FB683D;
					}

					.t2 {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FB683D;
					}
				}

				.contentType {
					padding: 24rpx 20rpx 63rpx;

					.active {
						border: 1rpx solid #FFC31E !important;

						.number {

							color: #FD3D28 !important;

							text {
								color: #FD3D28 !important;
							}
						}
					}

					.list {
						text-align: center;
						background: #F8F8F8;
						height: 263rpx;
						border-radius: 20rpx;
						position: relative;
						border: 1rpx solid #FFFFFF;

						overflow: hidden;

						.triangle {
							position: absolute;
							bottom: 0;
							right: 0;
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 0 0 24rpx 24rpx;
							border-color: transparent transparent #FEC31D transparent;
						}

						image {
							margin-top: 38rpx;
							width: 78rpx;
							height: 80rpx;
						}

						.namex {
							line-height: 80rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}

						.number {

							font-size: 36rpx;
							font-family: DINCond-Black;
							font-weight: 400;
							color: #666666;

							text {
								font-size: 28rpx;
								font-family: DIN Medium;
								font-weight: bold;
								color: #666666;
							}
						}
					}
				}


				.text {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #F46813;
					font-size: 28rpx;

					text {
						font-size: 64rpx;
						margin: -30rpx 10rpx 0;
					}
				}
			}
		}

		.button {
			border-radius: 40rpx;
			border: 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
		}
	}

	page {
		background: #FFFFFF;
	}

	.content {
		padding-left: 36rpx;
		overflow: scroll;
		display: flex;
		white-space: nowrap;

		.list {
			flex-shrink: 0;
			width: 370rpx;
			height: 657rpx;
			margin-right: 20rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			position: relative;

			.img {
				width: 100%;
				height: 467rpx;
				border-radius: 20rpx 20rpx 0 0;
			}

			.head {
				position: absolute;
				left: 0rpx;
				right: 0;
				margin: auto;
				top: 143rpx;
				width: 162rpx;
				border-radius: 50%;
				height: 162rpx;
			}

			.title {
				position: absolute;
				top: 340rpx;
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.int {
				z-index: 100;
			}

			.icon {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				width: 105rpx;
				height: 40rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF8652;
				margin-right: 27rpx;
				margin-top: 38rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.__bdi {
					width: 12rpx;
					height: 12rpx;
					background: #2FD09E;
					border-radius: 50%;
					margin-right: 5rpx;
				}
			}

			.button {
				position: absolute;
				margin-left: auto;
				width: 123rpx;
				height: 123rpx;
				z-index: 1;
				right: 0;
				top: 407rpx;
			}

			.data {
				width: 100%;
				height: 150rpx;
				display: flex;
				align-items: center;


				.cont {

					.date {
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						image {
							width: 43rpx;
							height: 43rpx;
							margin-right: 15rpx;
						}

						.image {
							height: 54rpx;
						}

						.time {
							font-size: 26rpx;
							font-family: PingFang SC;
							color: #999999;
						}
					}

					.name {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.number {
						font-size: 48rpx;
						color: #1B1B1B;
						font-weight: bold;

						text {
							margin-left: 10rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 200;
							font-style: normal;
							color: #999999;
						}
					}

				}

			}
		}
	}

	.advertising {

		padding: 29rpx 40rpx 39rpx;
		display: flex;
		align-items: center;
		height: 131rpx;

		image {
			width: 83rpx;
			height: 83rpx;
		}

		.name {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.text {
			height: 51rpx;
			background: #FDEEE7;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #F17538;
			display: flex;
			align-items: center;
			padding: 0 16rpx;
			margin-left: 17rpx;
		}
	}

	.dataX {
		position: relative;
		z-index: 10;
		/* #ifdef APP-PLUS */
		margin-top: calc(-100rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		margin-top: -90rpx;
		/* #endif */
		width: calc(100% - 72rpx);
		height: 542rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 36rpx;
		margin-right: 36rpx;
		padding: 20rpx 0;

		.user {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.head {
				width: 125rpx;
				height: 125rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-image: url(../../static/image/a3.png);
				background-size: 100% 100%;

				image {
					width: 102rpx;
					height: 102rpx;
					border-radius: 50%;
				}
			}

			.experience {
				width: 100%;

				.name {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;

					.right {
						margin-left: auto;
					}
				}

				.progress {
					width: 100%;
					height: 60rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;

					.u-progress {
						width: calc(100% - 280rpx);
					}

					.left {
						margin-right: auto;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}

					.right {
						margin-left: auto;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}

					.number {
						position: absolute;
						display: flex;
						top: -10rpx;
						width: 100%;

						.view {
							width: 160rpx;
							display: flex;
							align-items: center;

							.left {
								.p-icon {
									width: 22rpx;
									height: 22rpx;
									background: #FFC250;
									border-radius: 50%;
								}
							}

							.right {
								margin-left: auto;

								.x {
									display: flex;
									align-items: center;

									.p-icon {
										margin-left: auto;
										width: 35rpx;
										height: 35rpx;
										text-align: right;
										background: rgba(253, 103, 13, 0.3);
										border-radius: 50%;
										display: flex;
										align-items: center;
										justify-content: center;

										.p {
											width: 22rpx;
											height: 22rpx;
											background: #FD670D;
											border-radius: 50%;
										}
									}
								}

							}


							.u-text {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #666666;
							}
						}
					}
				}
			}
		}

		.dex {
			display: flex;
			align-items: center;

			.right {
				margin-left: auto;

				.up {
					width: 220rpx;
					height: 130rpx;
					border-radius: 10rpx;
				}

				.name {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					display: flex;
					align-items: center;
					height: 60rpx;
					margin-left: 20rpx;

					.icon {
						width: 16rpx;
						height: 16rpx;
						margin-right: 14rpx;
					}
				}

				.number {
					font-size: 48rpx;
					font-weight: bold;
					color: #1B1B1D;
					display: flex;
					align-items: center;
					height: 60rpx;
					margin-left: 20rpx;

					text {
						margin-top: 15rpx;
						font-size: 32rpx;
					}
				}
			}

			.left {
				background-image: url(../../static/image/a4.png);
				background-size: 100% 100%;
				width: 436rpx;
				height: 430rpx;

				.name {
					text-align: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #41485D;
				}

				.con {
					text-align: center;
					background-image: url(../../static/image/a3.png);
					background-size: 100% 100%;
					width: 278rpx;
					height: 278rpx;
					margin: 40rpx auto 30rpx;


					.number {
						padding-top: 75rpx;
						font-weight: bold;
						font-size: 60rpx;
						color: #1B1B1B;
					}

					.text {

						font-weight: bold;
						font-size: 36rpx;
						color: #1B1B1B;
					}
				}

			}
		}
	}

	.top {
		border-radius: 0rpx 0rpx 0rpx 40rpx;
		/* #ifdef APP-PLUS */
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(200rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		height: 200rpx;
		/* #endif */

		color: #FFFFFF;
		position: relative;

		.giveKmb {
			position: absolute;
			right: 70rpx;
			top: 120rpx;
			width: 220rpx;
			height: 170rpx;
		}

		.title {
			height: 120rpx;
			align-items: center;
			display: flex;
			padding: 0 50rpx;

			.left {
				color: #333333;
				width: 185rpx;
				height: 96rpx;
				background-image: url(../../static/image/a0.png);
				background-size: 100% 100%;
				display: flex;
				align-items: center;

				.img {
					width: 56rpx;
					height: 43rpx;
					margin-left: 8rpx;
				}

				.site {
					margin-left: 10rpx;

					.name {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						display: flex;
						align-items: center;

						image {
							margin-left: 19rpx;
							width: 19rpx;
							height: 10rpx;
						}
					}

					.text {
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 500;
					}
				}
			}

			.icon {
				margin-left: auto;
				width: 78rpx;
				height: 78rpx;
			}
		}


		.kmd {
			padding: 0 50rpx;
			float: left;

			.number {
				font-size: 90rpx;
				color: #FFFFFF;
				font-weight: bold;

				text {
					font-size: 32rpx;
					margin-left: 15rpx;
				}
			}

			.text {
				padding-left: 15rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}

	}
</style>
